<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <!-- <el-form-item>
        <c-select placeholder="受理状态"
                  clearable
                  v-model="params['is_approval.eq']"
                  @change="getData()"
                  :options="{'-1': '延时受理', 0: '未受理', 1: '已受理'}"></c-select>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-download" :loading="exportLoading" @click="exportData('公共库')">
          导出
        </el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button @click="handleNewNormal()"
                   type="primary"
                   icon="el-icon-plus">新增项目</el-button>
      </el-form-item> -->
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:result="scope">
        <div class="badge" :class="`badge-${scope.row.scanBlackResultStyle}`">
          {{ scope.row.scanBlackResultLabel }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="项目信息">
          <info-view :related-data="relatedData"></info-view>
        </el-tab-pane>
        <!-- <el-tab-pane label="数字档案卡">
          <credit-file :query-id="queryId"
                       :viewMode="true"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="政府推荐函">
          <recommend-file :related-data="relatedData"
                          :viewMode="true"></recommend-file>
        </el-tab-pane> -->
        <el-tab-pane label="附件">
          <attach-view :query-id="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <new-project
      :visible.sync="visible"
      title="项目受理"
      @success="handleSuccess"
      :query-id="relatedId"
      :is-common-project="true"
    ></new-project>

    <black-view-dialog :visible.sync="blackVisible" :query-id="blackId"></black-view-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { enumScanBlackStatus, enumSubmitType } from '@/credit/plugins/enumTown'
import { enumProjectType } from '@/gov/plugins/enum'
import { excelJsonExport } from '@vimi/utils-tool'

import taskTableMixin from '@/credit/mixin/self/taskTable'

import AttachView from '@/credit/components/AttachView'
import SelectAddress from '@/components/select/SelectAddress'
// import CreditFile from '@/credit/components/creditFile/CreditCard'
// import RecommendFile from '@/credit/views/city/program/RecommendFile'
import NewProject from '@/credit/views/city/program/new/EditProject'
import InfoView from '@/bank/views/business/library/ProjectInfo'
import BlackViewDialog from '@/credit/views/city/program/black/BlackViewDialog'
export default {
  components: {
    SelectAddress,
    // CreditFile,
    AttachView,
    // RecommendFile,
    NewProject,
    InfoView,
    BlackViewDialog,
  },
  mixins: [taskTableMixin],
  props: {},
  data() {
    return {
      order: {
        N1recommend_time: 'desc',
        N2create_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'recommend_status.eq': 1,
        'gua_type.neq': 3,
        'is_approval.eq': 0,
      },
      editRow: {},
      queryId: '',
      reportVisible: false,
      exportLoading: false,
      relatedData: {},
      // tableName: 'customer_related',
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '项目类型', prop: 'projectType', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '推荐时间', prop: 'recommend_time', align: 'center' } },
        { attrs: { label: '项目来源', prop: 'projectRescource', align: 'center' } },
        {
          attrs: { label: '扫黑结果', prop: 'scanBlackResultLabel', align: 'center', width: 110 },
          slot: 'result',
        },
        {
          attrs: { label: '扫黑详情', align: 'center', width: 100 },
          operations: [
            {
              name: '查看',
              type: 'primary',
              event: this.handlerViewBlack,
              ifRender: v => v.scan_black_result,
            },
          ],
        },
        {
          attrs: { label: '操作', align: 'center', width: 140 },
          operations: [
            {
              content: '受理',
              icon: 'fa fa-gavel',
              event: this.handleNewNormal,
              ifRender: row => row.editEnable,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      totalCount: 0,
      statusIndex: -1,
      cellStyles: {},
      relatedId: '',
      visible: false,
      isNeedEdit: false,

      blackVisible: false,
      blackId: '',
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId']),
  },
  watch: {},
  created() {
    this.params.address_code = this.$utils.getAddressCode()
    this.params['service_id.eq'] = `''`
    this.getData()
  },
  mounted() {},
  methods: {
    handlerViewBlack(row) {
      this.blackVisible = true
      this.blackId = row.customer_related_id || ''
    },
    handleSuccess() {
      this.getData()
      this.$emit('success', true)
    },
    // 复写mixins
    getParams() {
      return this.params
    },
    dataAdapter(item) {
      item.isApproval = +item.is_approval
      item.claimStatus = +item.claim_status // 银行认领状态
      item.confuseStatus = +item.confuse_status
      item.projectRescource =
        +item.submit_type === 2 ? item.submit_person_name : enumSubmitType[item.submit_type]
      item.isMyProject = item.service_id === this.clientId
      item.isReject = item.isApproval === 2 || item.claimStatus === 2

      item.editEnable = item.isApproval <= 0 && (item.isMyProject || !item.service_id)
      item.projectType = enumProjectType[item.project_type] || '-'
      item.recommend_time = this.$utils.dateFormat(
        item.recommend_time || item.create_time,
        'yyyy.MM.dd'
      )

      const sacnBlackResult = enumScanBlackStatus[item.scan_black_result] || {}
      item.scanBlackResultLabel = sacnBlackResult.label || '-'
      item.scanBlackResultStyle = sacnBlackResult.style || '-'

      return item
    },

    async exportData(filename) {
      const exportTable = this.tableColumns.filter(item => !item.operations)
      const header = {}
      const headerCellStyles = {}
      const columns = exportTable.map((item, i) => {
        const { prop, label } = item.attrs || {}
        header[prop] = label
        headerCellStyles[`${String.fromCharCode(65 + i)}1`] = {
          font: { bold: true },
        }
        if (prop === 'statusLable') {
          this.statusIndex = i
        }
        return prop
      })

      this.exportLoading = true
      const { index, size, ...params } = this.getParams()
      const [res = {}] = await this.fetchData(params)
      this.exportLoading = false

      const data = (res.data || []).map(this.dataAdapter)

      excelJsonExport({
        columns,
        data: [header, ...data],
        filename,
        styles: {
          border: {
            left: { style: 'thin' },
            top: { style: 'thin' },
            right: { style: 'thin' },
            bottom: { style: 'thin' },
          },
          alignment: {
            vertical: 'center',
            horizontal: 'center',
            wrapText: true,
          },
        },
        cellStyles: {
          ...headerCellStyles,
          ...this.cellStyles,
        },
      })
    },

    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
      this.relatedData = row
    },
    handleNew(row) {
      this.visible = true
      this.relatedId = row ? row.customer_related_id : ''
    },
    handleNewNormal(row) {
      this.isNeedEdit = false
      this.handleNew(row)
    },
  },
}
</script>
<style scoped>
.decoration {
  text-decoration: line-through;
}
</style>
